<template>
  <div class="page">
    <tree-list
      :path="selectPath"
      :show-level="1"
      @folder-select="folderSelect"
      @file-select="fileSelect"
    ></tree-list>
    <div class="content-wrapper">
      <c-card v-if="selectPath" title="电能历史数据">
        <div class="search-row">
          <div>
            <div class="item">
              <label>时间</label>
              <el-select v-model="interval" size="small" @change="_getList">
                <el-option v-for="(d, i) in dateList" :key="i" :value="i+1" :label="d"></el-option>
              </el-select>
            </div>
            <div class="item">
              <label>选择日期</label>
              <el-date-picker
                v-model="startDate"
                type="date"
                placeholder
                size="small"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="_getList"
              ></el-date-picker>
            </div>
            <div class="item">
              <el-button type="primary" size="small" icon="el-icon-upload" @click="exportReport">导出xls</el-button>
            </div>
            <div class="item">
              <el-button type="primary" size="small" icon="el-icon-upload" @click="exportXlsx">导出xlsx</el-button>
            </div>
          </div>
        </div>
        <el-table
          ref="table"
          v-loading="loading"
          :data="list"
          :height="tableHeight"
          style="width: 100%"
        >
          <el-table-column label="变量名称" prop="name" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column v-for="(item,i) in header" :key="i" :label="item">
            <template v-slot="{row}">{{ row.datas && row.datas[i] }}</template>
          </el-table-column>
        </el-table>
      </c-card>
      <h3 v-else style="text-align: center; ">请先选择厂站...</h3>
    </div>
  </div>
</template>

<script>
import TreeList from "./components/TreeList";
import CCard from "@/components/CCard";
import { debounce } from "lodash";
import { parseTime, downloadFile } from "@/utils";
import { getAllHis, exportReport } from "@/api/svg";
export default {
  name: "AllDataHis",
  components: {
    TreeList,
    CCard
  },
  data() {
    return {
      loading: false,
      interval: 1,
      dateList: ["当天", "当周", "当月"],
      startDate: parseTime(new Date(), "{yyyy}-{mm}-{dd}"),
      list: null,
      header: null,
      selectPath: null,
      devvarName: null,
      tableHeight: 492
    };
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(to, from) {
        if (from && from.fullPath === to.fullPath) return;
        if (!to.query.path) return;
        this.selectPath = (to.query.path || "").split(",");
        if (this.selectPath.length > 0) {
          this.$nextTick(() => {
            const h = this.$refs["table"].$el.clientHeight;
            this.tableHeight = h;
            this._getList(this.selectPath[this.selectPath.length - 1]);
          });
        }
      }
    }
  },
  methods: {
    _getList() {
      // todo get api data
      if (!this.startDate) {
        return this.$message.error("请选择日期");
      }
      this.loading = true;
      return getAllHis(
        this.selectPath[this.selectPath.length - 1],
        this.interval,
        this.startDate
      )
        .then(data => {
          this.list = data.list;
          this.header = data.header;
        })
        .catch()
        .finally(() => (this.loading = false));
    },
    // 导出xls
    exportReport() {
      const excelVersion = 1;
      if (!this.startDate) {
        return this.$message.error("请选择日期");
      }
      exportReport(
        this.selectPath[this.selectPath.length - 1],
        this.interval,
        this.startDate,
        excelVersion
      )
        .then(res => {
          const filename = Date.now() + ".xls";
          downloadFile(res, filename);
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 导出xlsx
    exportXlsx() {
      const excelVersion = 2;
      if (!this.startDate) {
        return this.$message.error("请选择日期");
      }
      exportReport(
        this.selectPath[this.selectPath.length - 1],
        this.interval,
        this.startDate,
        excelVersion
      )
        .then(res => {
          const filename = Date.now() + ".xlsx";
          downloadFile(res, filename);
        })
        .catch(e => {
          console.log(e);
        });
    },
    folderSelect: debounce(function(path) {
      const urlPath = this.$route.path;
      this.selectPath = path;
      this.$router.push(urlPath + "?path=" + path.join(","));
    }, 500),
    fileSelect: debounce(function(path) {
      const urlPath = this.$route.path;
      this.selectPath = path;
      this.$router.push(urlPath + "?path=" + path.join(","));
    }, 500)
  }
};
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
}
.tree {
  position: absolute;
  width: 275px;
  height: 100%;
  overflow-y: auto;
  background: #222c3c;
  box-sizing: border-box;
}
.content-wrapper {
  overflow-y: auto;
  margin-left: 275px;
  height: 100%;
}
</style>
